<!--
 * @Author: your name
 * @Date: 2021-02-25 21:33:59
 * @LastEditTime: 2021-02-26 17:24:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_test\src\components\Login.vue
-->
<template>
    <div class="login_container">
        <!--登录盒子-->
        <div class="login_box">
            <!--头像-->
            <div class="avatar_box">
                <img src="@/assets/logo.png" alt="logo">
            </div>
            <!--登录表单-->
            <el-form ref="LoginFormRef" label-width="0px" class="login_form" :model="loginForm" :rules="loginFormRules">
                <!--用户名-->
                <el-form-item prop="username">
                    <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item prop="password">
                    <el-input prefix-icon="iconfont icon-3702mima" v-model="loginForm.password" type="password"></el-input>
                </el-form-item>
                <!--按钮-->
                 <el-form-item class="btns">
                     <el-button type="primary" @click="login('LoginFormRef')">登录</el-button>
                     <el-button type="info" @click="resetLoginForm('LoginFormRef')">重置</el-button>
                </el-form-item>  
            </el-form>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return {
            //数据绑定
            loginForm : {
                username : 'admin',
                password : '123456'
            },
            //表单验证规则
            loginFormRules :{
                username : [
                     { required: true, message: '请输入用户名称', trigger: 'blur' },
                     { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password : [
                     {required:true,message:'请输入密码',trigger:'blur'},
                     {min:6,max:15,message:'长度在6到15个字符',trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        //添加表单重置方法
        resetLoginForm(field){
            //this => 当前组件的对象，其中的属性$refs中包含了设置表单的ref
            // this.$refs[field].resetFields();
            this.$refs.LoginFormRef.resetFields();
        },
        //进行登录操作
        login(field){
            this.$refs[field].validate(async valid => {
                //这里的valid如果返回的是false的话,就代表验证不通过,如果返回true的话,就代表验证通过
                //如果valid为false的话，就验证不通过，就不调用登录接口
                if(!valid){
                    return false;
                }
                //如果valid为true的话,就要调用登录接口
                //await 异步请求下来的是json数据,data数据是浏览器默认的外层数据，其实就是后端全部请求的数据
                const {data : res} = await this.$http.post('login',this.loginForm);
                if(res.meta.status != 200){
                    return this.$message({
                        message : '登录失败',
                        type : 'error'
                    });
                }else{
                    this.$message({
                        message : '登录成功',
                        type : 'success'
                    });
                    //登录成功之后需要把后台返回的_token数据保存在本地的sessionStorage中
                    //因为sessionStronge是关闭网站之后就会关闭，不适用localStronge的原因是他是永久的本地存储
                    //保存token
                    window.sessionStorage.setItem('token',res.data.token);
                    //登录成功之后跳转到Home组件
                    //使用编程式导航进行跳转
                    this.$router.push('/home');
                }
            });
        }
    }
}
</script>

<style scoped Lang="less">
    .login_container{
        background-color: #2b5b6b;
        height: 100%;
    }
    .login_box{
        width: 450px;
        height: 300px;
        background: #ffffff;
        /*想要平移,必须使用相对定位*/
        position: absolute;
        left: 50%;
        top: 50%;
        /*transform translate 水平平移，垂直平移 负数向左平移   正数向下平移*/
        border-radius: 3px;
        transform: translate(-50%,-50%);
        border: 1px solid #eeeeee;
    }
    .login_box .avatar_box{
        height: 130px;
        width:130px;
        border:1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background: #ffffff;
    }
    .login_box .avatar_box img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #eee;
    }
    .login_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        /*把边框和内边距放入框中*/
        box-sizing: border-box;
    }
    .btns{
        /*使用flex布局*/
        display: flex;
        /*flex里面的内容的布局方式为靠右*/
        justify-content: flex-end;
    }
</style>